<template>
  <div class="el-select-dropdown__item" @click="onClick(source.value)">
    <div class="id" :class="itemClass(source.value)">
      {{ source.value }} - {{ source.label }}
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "item",
  props: {
    source: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  inject: ["ParentVirtualSelect"],
  watch: {},
  methods: {
    onClick(value) {
      this.getParent().clickItem(value);
    },
    isSelected(value) {
      return this.getParent().isSelected(value);
    },
    itemClass(value) {
      return this.isSelected(value) ? ["selected"] : [];
    },
    getParent() {
      const parent = this.ParentVirtualSelect();
      return parent;
    },
  },
};
</script>
  
  <style scoped>
.item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid lightgrey;
  padding: 1em;
}

.selected {
  color: #409eff;
  background-color: #fff;
}
.selected::after {
  position: absolute;
  right: 5px;
  font-family: element-icons;
  content: "\e6da";
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
  